/**
 * Created by Administrator on 2017/4/6.
 */
window.onload=function () {
    (function(parentdiv,banw,transit,gotime,goflag) {
        parentdiv=parentdiv?parentdiv:'#ban';        /*最外层容器*/
        banw=banw?banw:1000;                            /*最外层容器宽度*/
        transit=transit?transit:500;                    /*切换时间*/
        gotime=gotime?gotime:5000;                      /*定时切换间隔时间*/
        goflag=goflag?goflag:false;                     /*是否定时切换,false不改变*/

        this.banner = document.querySelector(parentdiv);    /*最外层容器*/
        var that=this,
            ul_img = this.banner.querySelector('.img'),     /*图片父容器*/
            li_img = ul_img.querySelectorAll('li'),         /*每张图片*/
            ul_list = this.banner.querySelector('.navlist'),/*小圆点父容器*/
            arrow = this.banner.querySelectorAll('i'),      /*箭头*/
            timer=null;                                     /*定时轮播的定时器*/


        this.banner.style.width = banw + 'px';                  /*初始化父容器*/
        ul_img.style.width = (li_img.lengh)*banw + 'px';        /*初始化父容器*/
        ul_img.style.transform = 'translateX('+(-banw)+'px)';   /*初始化translateX值*/
        for (var i = 0; i < li_img.length; i++) {
            li_img[i].style.width = banw + 'px';                /*初始化每张图片的宽度*/
        }
        for (var i = 0; i < arrow.length; i++) {        /*好看点箭头的宽高*/
            banw > 600 ? arrow[i].style.width = parseInt(banw * 0.06) + 'px' : '';
            banw <= 600 ? arrow[i].style.width = parseInt(banw * 0.08) + 'px' : '';
            arrow[i].style.lineHeight = parseInt(banw / 5) + 'px';
        }

        for (var i = 0; i < li_img.length; i++) {       /*创建小圆点*/
            ul_list.innerHTML += '<li></li>';
        }
        var li_list = ul_list.querySelectorAll('li'),   /*每个小圆点*/
            list_index = 0;                             /*小圆点当前下标*/
        li_list[list_index].className = 'active';       /*当前第一个active*/

        /*----------创建假的第一张和最后一张----------*/
        var first_img = ul_img.firstElementChild.cloneNode(true),
            last_img = ul_img.lastElementChild.cloneNode(true);
        ul_img.insertBefore(last_img, ul_img.firstElementChild);
        ul_img.appendChild(first_img);

        /*----------移动图片方法----------*/
        function moveImg(imgOffset) {
            ul_img.style.transition = 'none';
            var latex=parseInt(ul_img.style.transform.slice(11));   /*获取translate的值*/
            if (latex == -banw&&imgOffset>0) {      /*因为是先判断再移动，所以判断会慢一步，如果等于第一张再往左就移动到最后一张,下同*/
                ul_img.style.transform = 'translateX('+((-banw) * (li_list.length + 1))+'px)';
                window.getComputedStyle(ul_img).transform;
            } else if (latex == ((-banw) * li_list.length)&&imgOffset<0) {
                ul_img.style.transform = 'translateX(0px)';
                window.getComputedStyle(ul_img).transform;
            }
            ul_img.style.transition = 'transform '+transit+'ms ease-out';   /*加上过渡*/
            ul_img.style.transform = 'translateX('+(parseInt(ul_img.style.transform.slice(11)) + imgOffset) + 'px)';         /*每次都执行移动*/
        }

        /*----------移动小圆点方法----------*/
        function moveList() {
            for (var i = 0; i < li_list.length; i++) {
                li_list[i].className = '';                  /*清空所有的active*/
            }
            li_list[list_index].className = 'active';       /*给当前的加上active*/
        }

        /*----------点击左右箭头----------*/
        this.banner.querySelector('.icon-arrowleft').addEventListener('click', function () {
            moveImg(banw);
            list_index == 0 ? list_index = li_list.length - 1 : list_index--;
            moveList();
        });
        this.banner.querySelector('.icon-arrowright').addEventListener('click', function () {
            moveImg(-banw);
            list_index == li_list.length - 1 ? list_index = 0 : list_index++;
            moveList();
        });

        /*----------点击小圆点----------*/
        for (var i = 0; i < li_list.length; i++) {
            li_list[i].index = i;
            li_list[i].addEventListener('click', function () {
                moveImg((this.index - list_index) * (-banw));
                list_index = this.index;
                moveList();
            });
        }

        /*----------自动切换图片----------*/
        function go() {
            if(!goflag){
                timer=setInterval(function () {
                    that.banner.querySelector('.icon-arrowright').click();
                },gotime);
            }
        }
        go();

        /*----------鼠标移上去不动----------*/
        this.banner.addEventListener('mouseenter',function () {
            clearInterval(timer);
        });
        this.banner.addEventListener('mouseleave',function () {
            go(gotime);
        });
    })();
}